.main-page{ margin: 0 auto;color: #333;background-color: #F1F1F1;font-family: 'HiraginoSansGB-W3','Microsoft YaHei','微软雅黑','SimSun','宋体','PingFang SC','STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif;}

.header{position: relative;height:45px;background-color:#FF9B14;background-image:-webkit-linear-gradient(to bottom, #FFC149, #FF9B14); background-image:linear-gradient(to bottom,#FFC149, #FF9B14);}
.header .title{padding: 0 70px;text-align: center;height:45px;line-height: 45px;font-size: 18px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #fff;}
.header .head-tap{display: block;padding: 0 20px;height:45px;line-height: 45px; color: #fff;font-size: 14px;position: absolute;top:0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.header .tap-right{right: 0}
.header .tap-left{left: 0}
.head-icon{display: inline-block;background: url("../images/header.png") no-repeat;background-size: 16px auto;}
.header .head-left{width: 8px;height: 15px;margin: 15px 0;background-position: -4px -1px}

.content{position: absolute;top: 45px; left: 0;bottom: 0;right: 0;}
.select-wrapper{display: -webkit-box;display: -moz-box;display: flex;display:-webkit-flex;font-size: 14px;-webkit-box-shadow: 0px 2px 2px rgba(140, 140, 140, 0.2);box-shadow: 0px 2px 2px rgba(140, 140, 140, 0.2);}
.select-wrapper .select-item{position: relative;-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow:1;flex-grow:1;width: 0;height:50px;line-height: 50px;padding:0 40px 0 20px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.select-wrapper .select-item:after{content: "";display: block;width: 0;height: 0;border:3px solid #9e9f9f; border-top-color:transparent;border-left-color:transparent;
position: absolute;top:50%;right: 20px; -webkit-transform:rotate(45deg) translate(-50%,-50%);transform:rotate(45deg) translate(-50%,-50%);}
.select-wrapper .select-item+.select-item{border-left: 1px solid #f1f1f1;}
.select-wrapper .select-item.active{color:#FF9B14}
.select-wrapper .select-item.active:after{border-left-color:#FF9B14; border-top-color:#FF9B14;border-bottom-color:transparent;border-right-color:transparent;-webkit-transform:rotate(45deg) translate(-50%,-50%);transform:rotate(45deg) translate(-3%,-9%);}

.select-content{position: absolute;width: 100%;top: 50px;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.25);z-index: 99;opacity:0;display: none}
.select-content .option-list{background-color: #fff; height: 80%;width: 100%;border-top: 1px solid #f1f1f1;overflow-y: auto}
.select-content .option-list .option{padding: 0 20px;height: 50px;line-height: 50px;font-size: 14px;border-bottom: 1px solid #f1f1f1;}
.select-content .option-list .option.active{color:#FF9B14 }
.select-content.show{display: block;    -webkit-transition: all .05s linear;  transition: all .05s linear;}
.select-content.fade{opacity:1}

.rec-list{padding: 5px 10px 10px;overflow-y: auto;position: absolute;top:55px;bottom: 0;left: 0;right: 0}
.rec-list.selectIng{overflow-y: hidden}
.rec-list .rec-item{padding:15px;background-color: #fff;-webkit-border-radius:3px;border-radius: 3px;overflow: hidden;-webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);box-shadow: 0 0 5px rgba(0,0,0,.2)}
.rec-list .rec-item+.rec-item{margin-top: 10px}
.rec-list .rec-item .detail-list{font-size: 0; }
.rec-list .rec-item .detail-list+.detail-list{margin-top: 15px}
.detail-list span{display: inline-block;font-size: 14px;color: #888;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.detail-list .left{width: 60%}
.detail-list .right{width: 38%;text-align: right}
.detail-list .status{color: #4CD964}
.detail-list .time{color: #FF9B14}
.fail .detail-list .status{color: red}
.rec-info.detail-list{padding-bottom: 15px;border-bottom: 1px solid #f1f1f1;}
